<template>
  <div class="container">
    <div class="actionBtn">
      <el-button type="primary" @click="proxy.$refs.FolderUploaderRef.open()">导入文件夹</el-button>
      <el-button type="primary" @click="proxy.$refs.FileUploaderRef.open()">导入文件</el-button>
    </div>
    <el-table :data="tableData.rows">
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="文件名" />
      <el-table-column prop="url" label="文件链接" />
      <el-table-column label="添加时间" width="180">
        <template #default="scope">
          {{proxy.$utils.dateTimeFormateFn(scope.row._add_time,"all")}}
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="params.pageIndex" v-model:limit="params.pageSize" @pagination="getInfo" />

    <!-- 上传文件夹 -->
    <FolderUploader ref="FolderUploaderRef" @fatherMethods="getInfo"></FolderUploader>

    <!-- 上传文件 -->
    <FileUploader ref="FileUploaderRef" @fatherMethods="getInfo"></FileUploader>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();

let params = ref({
  pageIndex: 1,
  pageSize: 50,
});
let tableData = ref({});

onMounted(() => {
  getInfo();
});

async function getInfo() {
  tableData.value = await proxy.$apis.fileList({
    type: "list",
    data: params.value,
  });
  console.log("tableData.value", tableData.value);
}

function handleFolderUpload(params) {
  console.log("params", params);
}
</script>



<style lang="scss" scoped>
.container {
  margin: 20px;
  .actionBtn {
    margin-bottom: 15px;
  }
}
</style>
